<template>
	<view class="">
		<view class="">
			<view class="find-header">
				<view class="find-header-img">
					<image mode="widthFix" src="https://statics.xmcsrv.net/weixin/Telkomsel/connectWifi.png" alt=""/>
				</view>
				<view class="hint-text">
					{{$t('connectNet.wifi_5GHz_warning')}}
				</view>
			</view>
			<view class="set-input" style="text-align: center;">
				<uni-easyinput prefixIcon="tune" v-model="wifiName" :placeholder="$t('connectNet.enter_wifi_name')">
				</uni-easyinput>
				<!-- <view v-if="!wifiName" class="wifiTips">获取不到wifi名称时请手动开启定位后进页面重试</view> -->
				<uni-easyinput type="password" prefixIcon="locked" v-model="wifiPwd"
					:placeholder="$t('connectNet.enter_wifi_password')"></uni-easyinput>
			</view>
			<view class="find-hint">
				*{{$t('connectNet.choose_strong_signal_wifi')}}
			</view>
			<view class="find-food-hint" @click="showConnectInfo">
				{{$t('connectNet.network_connection_issues')}}？
			</view>
			<view class="find-food">
				<button data-code="601016" data-eventName="click_wifi_config_confirm_wifi_button" class="radius-btn" @tap="onBindtapsubmit()" type="operation">{{$t('JLink.publicText.define')}}</button>
			</view>
		</view>
		<uni-popup ref="connectPopup">
			<view class="popup-connect" style="width: 600rpx;">
				<view class="popup-header">
					<text class="p-title">{{$t('connectNet.networking_failures')}}</text>
					<uni-icons class="close" type="closeempty" color="#AFAFAF" @click="closeConnectInfo"></uni-icons>
				</view>
				<view class="u-f-c popup-content">
					<text>1、{{$t('connectNet.check_wifi_settings')}};</text>
					<text>2、{{$t('connectNet.check_router_freq')}};</text>
					<text>3、{{$t('connectNet.bridge_router_warning')}};</text>
					<text>4、{{$t('connectNet.distance_obstacles_warning')}}</text>
				</view>
				<view class="popup-tips">{{$t('connectNet.strong_signal_wifi_tip')}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const { useStrFill } = require('@/jvss/pagesDevice/utils/index.js');
	export default {
		data() {
			return {
				wifiName: '',
				wifiPwd: '',
				linkshow: false,
				device: {},
				serviceId: '00001910-0000-1000-8000-00805f9b34fb',
				characteristicId: '00002b10-0000-1000-8000-00805f9b34fb',
				notifyId: '00002b10-0000-1000-8000-00805f9b34fb',
				isLinked: false, //连接蓝牙
				isReceived: false, //设备收到消息
				isDistributeNet: false, //配网
				time: 180,
				timerId: null,
				showPwd: true

			}
		},
		onUnload() {
			wx.stopWifi({
				success(res) {
					console.log(res.errMsg)
				}
			})
		},
		onLoad(opt) {
			uni.setNavigationBarTitle({
				title: this.$t('connectNet.Router_Settings')
			});
			this.startWifi()
		},
		methods: {
			//确定
			onBindtapsubmit() {
				if (!this.wifiName) {
					return uni.showToast({
						title: this.$t('connectNet.enter_wifi_name'),
						icon: 'none'
					})
				}
				if (!this.wifiPwd) {
					return uni.showToast({
						title: this.$t('connectNet.enter_wifi_password'),
						icon: 'none'
					})
				}
				let data = {
					wifiName: this.wifiName,
					wifiPwd: this.wifiPwd
				}
				uni.setStorageSync('wifiInfo', data)
				// this.linkshow = true;
				// this.createBLEConnection()
				uni.navigateTo({
					url: '/jvss/pagesDevice/device/qrcode/codeprompt?device=' + JSON.stringify(data)
				});
			},
			close() {
				this.$refs.popup.close();
			},
			iconClick() {
				console.log('ddd');
				this.showPwd = this.showPwd
			},
			//联网遇到的问题弹框
			showConnectInfo() {
				console.log('dayin');
				this.$refs.connectPopup.open();
			},
			closeConnectInfo() {
				this.$refs.connectPopup.close();
			},
			//取消配网
			cancellink() {
				this.linkshow = false
				clearInterval(this.timerId)
				this.time = 180
				uni.hideLoading()
				this.closeBLEConnection()
			},
			//连接蓝牙
			confirm() {
				this.linkshow = true;
				this.$refs.popup.close();
				this.createBLEConnection()
			},
			// 设置倒计时
			setTime() {
				this.timerId = setInterval(() => {
					this.time = this.time - 1
					if (this.time < 1) {
						clearInterval(this.timerId)
					}
				}, 1000)
			},
			//初始化 Wi-Fi 模块
			startWifi() {
				wx.startWifi({
					success: (res) => {
						// this.onWifiConnect()
						this.getConnectedWifi()
					},
					fail: (err) => {
						console.log('wifierr:', err);
					}
				})
			},
			//监听连接上 Wi-Fi 的事件
			onWifiConnect() {
				console.log('ceshi')
				wx.onWifiConnectedWithPartialInfo((res) => {
					console.log(res, '打印wifi信息');
					this.wifiName = res.wifi.SSID
				})
			},
			getConnectedWifi() {
				wx.getConnectedWifi({
					success: res => {
						// console.log(res)
						this.wifiName = res.wifi.SSID
						console.log(uni.getStorageSync('wifiInfo'),'缓存的WiFi信息')
						if (res.wifi.SSID == uni.getStorageSync('wifiInfo').wifiName) {
						   this.wifiPwd = uni.getStorageSync('wifiInfo').wifiPwd
						}
						this.$logs({info:'获取wifi信息成功',res:res})
					},
					fail: (err) => {
						console.log('获取wifi信息失败',err);
						this.$logs({info:'获取wifi信息失败',err:err})
						uni.showModal({
							content:$t('connectNet.WiFi_information'),
							showCancel:false,
							success: () => {
							}
						})
					}
				})
			},
			//校验和
			createCheckCode(str) {
				let total = 0
				for (var i = 0; i < str.length / 2; i++) {
					let currentI = i * 2
					let i12 = currentI + 2
					let subString = str.substring(currentI, i12)
					total += parseInt(subString, 16)
				}
				let result = useStrFill((total % 256).toString(16), 2, '0', true)
				console.log('校验和', result);
				return result
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uniui-eye-slash-filled:before {
		content: "\e66a";
	}
	/deep/.uniui-eye-filled:before {
	    content: "\e6b4";
	}
	.top {
		position: relative;
		margin: 100rpx 0;

		.scanImg {
			width: 300rpx;
			height: 300rpx;
		}

		.time {
			font-size: 30rpx;
			font-weight: 700;
			color: white;
			z-index: 9;
			position: absolute;
			left: 0;
			right: 0;
			text-align: center
		}
	}

	.find-success-hint {
		font-size: 28rpx;
		color: #707070;
		text-align: center;
	}

	.popup-from {
		background-color: #fff;
		padding: 60rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
		line-height: 48rpx;
		color: #464646;
	}

	.message {
		font-size: 30rpx;
		line-height: 30rpx;
		color: #9A9A9A;
		width: 450rpx;
		margin: 60rpx 0;
	}

	.popup-button {
		display: flex;
	}

	.popup-connect {
		background-color: #fff;
		// padding: 20rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.popup-header {
		position: relative;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 20rpx;

		.p-title {
			font-size: 26rpx;
		}

		.close {
			position: absolute;
			right: 10rpx;
			top: 30rpx;
		}
	}

	.popup-content {
		padding: 30rpx;
		height: 350rpx;
		overflow: scroll;
		text-align: left;

		text {
			margin-top: 20rpx;
			color: #AFAFAF;
			font-size: 24rpx;
		}
	}

	.popup-tips {
		border-top: 1rpx solid #EEEEEE;
		padding: 20rpx;
		color: #FF0025;
		font-size: 26rpx;
		text-align: center;
	}

	.popup-button button {
		width: 200rpx !important;
		height: 80rpx;
		border-radius: 40px;
		border: none;
		font-size: 30rpx;
	}

	.find-header {
		margin-bottom: 50rpx;
	}

	.find-header-img {
		// width: 100px;
		// height: 100px;
		// margin: auto;
		margin-top: 60px;
		margin-bottom: 30px;
		text-align: center;
	}
	
	.find-header-img image {
		width: 400rpx;
	}
	.hint-text{
		font-size: 22rpx;
		color: #444444;
		line-height: 29rpx;
		text-align: center;
	}

	.find-type {
		display: flex;
		justify-content: center;
		font-size: 30rpx;

	}

	.find-type-t {
		color: #FF0025;
		margin-right: 20rpx;
	}

	.find-type-f {
		color: #F8716B;
	}
	.wifiTips{
		color: red;
		font-size: 22rpx;
		display: flex;
		margin-left: 20rpx;
	}
	.find-type-icons {
		text-align: center;
	}

	.find-hint {
		font-size: 16rpx;
		line-height: 15px;
		color: #444444;
		opacity: 0.8;
		margin-left: 2%;
	}

	/deep/.uni-easyinput {
		width: 96% !important;
		height: 80rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: 20rpx auto;
	}

	/deep/.uni-easyinput .is-input-border {
		border: none;
		height: 100%;
	}

	.find-food {
		text-align: center;
		position: fixed;
		bottom: 50rpx;
		width: 100%;
		font-size: 28rpx;
	}

	.find-food-hint {
		color: #FF0025;
		text-align: center;
		margin-top: 120rpx;
		font-size: 30rpx;
	}

	.find-food-submit {
		border: 1px solid #B9B9B9;
		border-radius: 16rpx;
		background-color: #fff;
		color: #FF0025 !important;
		width: 96%;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 50rpx;
	}

	button::after {
		border-color: transparent;
	}
</style>
